<template>
    <div>
        <div>
            <span id="spanpart">创建新的官方帖子</span>
        </div>
        <div>
            <el-divider content-position="center">请选择分类</el-divider>
            <el-radio-group v-model="categoryChosen">
                <el-radio :label="1">新手必看</el-radio>
                <el-radio :label="2">防止病虫害</el-radio>
                <el-radio :label="3">修枝剪叶</el-radio>
                <el-radio :label="4">花卉养护</el-radio>
                <el-radio :label="0">还没想好</el-radio>
            </el-radio-group>
        </div>
        <div>
            <el-divider content-position="center">请输入标题</el-divider>
            <el-input v-model="form.title" placeholder="草莓的十种食用方法" clearable style="width: 60%;font-family: '华文中宋';" />
        </div>
        <div>
            <el-divider content-position="center">请上传封面图片（长方形+正方形各一张喔）</el-divider>
            <div>
                <el-divider content-position="center">请选择是否为轮播图</el-divider>
                <el-radio-group v-model="isrotographChosen">
                    <el-radio :label="0">是轮播图</el-radio>
                    <el-radio :label="1">非轮播图</el-radio>
                </el-radio-group>
            </div>
            <el-upload class="upload-demo" action="" drag :auto-upload="false" :show-file-list="false"
                :on-change='handleChangeUpload' :on-preview="handlePreview" :on-remove="handleRemove"
                :before-upload="handleChange" list-type="picture">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">点击上传-长方形-封面图片</div>
                <div class="el-upload__tip">支持绝大多数图片格式，单张图片最大支持5MB</div>
            </el-upload>
            <div>
                <el-divider content-position="center">长方形封面图片预览</el-divider>
                <el-image class="previewTitlePic" v-if="choseCropperBig == false" :src="urlDefultForPic" :fit="contain" />
                <el-image class="previewTitlePic" v-if="choseCropperBig == true" :src="cropperImgDataBig" :fit="contain" />
            </div>
            <br />
            <el-upload class="upload-demo" action="" drag :auto-upload="false" :show-file-list="false"
                :on-change='handleChangeUploadSquare' :on-preview="handlePreviewSquare" :on-remove="handleRemoveSquare"
                :before-upload="handleChangeSquare" list-type="picture">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">点击上传-正方形-封面图片</div>
                <div class="el-upload__tip">支持绝大多数图片格式，单张图片最大支持5MB</div>
            </el-upload>
            <div>
                <el-divider content-position="center">正方形封面图片预览</el-divider>
                <el-image class="previewTitlePic" v-if="choseCropperSmall == false" :src="urlDefultForPic" :fit="contain" />
                <el-image class="previewTitlePicSquare" v-if="choseCropperSmall == true" :src="cropperImgDataSmall"
                    :fit="contain" />
            </div>

            <!-- 长方形 -->
            <div>
                <el-dialog title="图片剪裁" v-model="dialogVisible" class="crop-dialog" append-to-body>
                    <div class="cropper-content">
                        <div class="cropper" style="text-align:center">
                            <vueCropper ref="cropper" :img="cropperOptionBig.img" :outputSize="cropperOptionBig.outputSize"
                                :outputType="cropperOptionBig.outputType" :info="true" :full="cropperOptionBig.full"
                                :canMove="cropperOptionBig.canMove" :canMoveBox="cropperOptionBig.canMoveBox"
                                :original="cropperOptionBig.original" :autoCrop="cropperOptionBig.autoCrop"
                                :fixed="cropperOptionBig.fixed" :fixedNumber="cropperOptionBig.fixedNumber"
                                :centerBox="cropperOptionBig.centerBox" :infoTrue="cropperOptionBig.infoTrue"
                                :fixedBox="cropperOptionBig.fixedBox" @cropMoving="cropMoving" />
                        </div>
                    </div>
                    <div class="action-box">
                        <el-upload class="upload-demo" action="" :auto-upload="false" :show-file-list="false"
                            :on-change='handleChangeUploadChange'>
                            <el-button type="primary" plain class="changepicbtn">更换图片</el-button>
                        </el-upload>
                        <el-button type="primary" plain @click="clearImgHandle"
                            class="cropperpicbtnveryleft">清除图片</el-button>
                        <el-button type="primary" plain @click="rotateLeftHandle" class="cropperpicbtn">左旋转</el-button>
                        <el-button type="primary" plain @click="rotateRightHandle" class="cropperpicbtn">右旋转</el-button>
                        <el-button type="primary" plain @click="changeScaleHandle(1)" class="cropperpicbtn">放大</el-button>
                        <el-button type="primary" plain @click="changeScaleHandle(-1)" class="cropperpicbtn">缩小</el-button>
                        <el-button type="primary" plain @click="downloadHandle('blob')" class="cropperpicbtn">下载</el-button>
                        <!-- <el-button type="primary" plain @click="finish('blob')" class="usepicbtn">预览图片</el-button> -->
                        <el-button type="primary" plain @click="useMe" class="usepicbtn">使用本图</el-button>
                        <!-- 预览图片 -->
                        <!-- <div v-show="dialogPreViewBigVisible == true" class="show-preview" :style="{
                                'width': previews.w + 'px', 'height': previews.h + 'px', 'overflow': 'hidden',
                                'margin': '5px'
                            }">
                            <div :style="previews.div">
                                <img :src="cropperOptionBig.img" :style="previews.img">
                            </div>
                        </div> -->
                    </div>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="dialogVisible = false">取消</el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
            <!-- 正方形 -->
            <div>
                <el-dialog title="图片剪裁" v-model="dialogVisibleSmall" class="crop-dialog" append-to-body>
                    <div class="cropper-content">
                        <div class="cropper" style="text-align:center">
                            <vueCropper ref="cropper" :img="cropperOptionSmall.img"
                                :outputSize="cropperOptionSmall.outputSize" :outputType="cropperOptionSmall.outputType"
                                :info="true" :full="cropperOptionSmall.full" :canMove="cropperOptionSmall.canMove"
                                :canMoveBox="cropperOptionSmall.canMoveBox" :original="cropperOptionSmall.original"
                                :autoCrop="cropperOptionSmall.autoCrop" :fixed="cropperOptionSmall.fixed"
                                :fixedNumber="cropperOptionSmall.fixedNumber" :centerBox="cropperOptionSmall.centerBox"
                                :infoTrue="cropperOptionSmall.infoTrue" :fixedBox="cropperOptionSmall.fixedBox"
                                @cropMoving="cropMovingSquare" />
                        </div>
                    </div>
                    <div class="action-box">
                        <el-upload class="upload-demo" action="" :auto-upload="false" :show-file-list="false"
                            :on-change='handleChangeUploadSquareChange'>
                            <el-button type="primary" plain class="changepicbtn">更换图片</el-button>
                        </el-upload>
                        <el-button type="primary" plain @click="clearImgHandleSqare"
                            class="cropperpicbtnveryleft">清除图片</el-button>
                        <el-button type="primary" plain @click="rotateLeftHandleSqare" class="cropperpicbtn">左旋转</el-button>
                        <el-button type="primary" plain @click="rotateRightHandleSqare"
                            class="cropperpicbtn">右旋转</el-button>
                        <el-button type="primary" plain @click="changeScaleHandleSqare(1)"
                            class="cropperpicbtn">放大</el-button>
                        <el-button type="primary" plain @click="changeScaleHandleSqare(-1)"
                            class="cropperpicbtn">缩小</el-button>
                        <el-button type="primary" plain @click="downloadHandleSqare('blob')"
                            class="cropperpicbtn">下载</el-button>
                        <el-button type="primary" plain @click="useMeSquare" class="usepicbtn">使用本图</el-button>
                    </div>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="dialogVisibleSmall = false">取消</el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
        </div>
        <div>
            <el-divider content-position="center">请输入正文</el-divider>
            <el-input v-model="form.content" :autosize="{ minRows: 10, maxRows: 40 }" type="textarea" style="width: 80%;"
                placeholder="草莓是家喻户晓的一种植物，其果实酸甜多汁..." />
        </div>
        <div>
            <el-divider content-position="center">上传内容配图</el-divider>
            <el-upload class="uploadIneerPic" action="" drag :auto-upload="false" :show-file-list="false"
                :on-change='handleChangeUploadInner' :on-preview="handlePreviewinner" :on-remove="handleRemoveinner"
                :before-upload="handleChangeinner" list-type="picture">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">点击上传内容配图</div>
                <div class="el-upload__tip">仅可添加一张配图，支持绝大多数图片格式，单张图片最大支持5MB</div>
            </el-upload>
            <div>
                <el-dialog title="图片剪裁" v-model="dialogVisibleInner" class="crop-dialog" append-to-body>
                    <div class="cropper-content">
                        <div class="cropper" style="text-align:center">
                            <vueCropper ref="cropper" :img="cropperOptionInner.img"
                                :outputSize="cropperOptionInner.outputSize" :outputType="cropperOptionInner.outputType"
                                :info="true" :full="cropperOptionInner.full" :canMove="cropperOptionInner.canMove"
                                :canMoveBox="cropperOptionInner.canMoveBox" :original="cropperOptionInner.original"
                                :autoCrop="cropperOptionInner.autoCrop" :fixed="cropperOptionInner.fixed"
                                :fixedNumber="cropperOptionInner.fixedNumber" :centerBox="cropperOptionInner.centerBox"
                                :infoTrue="cropperOptionInner.infoTrue" :fixedBox="cropperOptionInner.fixedBox"
                                @cropMoving="cropMoving" />
                        </div>
                    </div>
                    <div class="action-box">
                        <el-upload class="upload-demo" action="" :auto-upload="false" :show-file-list="false"
                            :on-change='handleChangeUploadInnerChange'>
                            <el-button type="primary" plain class="changepicbtn">更换图片</el-button>
                        </el-upload>
                        <el-button type="primary" plain @click="clearImgHandleInner"
                            class="cropperpicbtnveryleft">清除图片</el-button>
                        <el-button type="primary" plain @click="rotateLeftHandleInner" class="cropperpicbtn">左旋转</el-button>
                        <el-button type="primary" plain @click="rotateRightHandleInner"
                            class="cropperpicbtn">右旋转</el-button>
                        <el-button type="primary" plain @click="changeScaleHandleInner(1)"
                            class="cropperpicbtn">放大</el-button>
                        <el-button type="primary" plain @click="changeScaleHandleInner(-1)"
                            class="cropperpicbtn">缩小</el-button>
                        <el-button type="primary" plain @click="downloadHandleInner('blob')"
                            class="cropperpicbtn">下载</el-button>
                        <el-button type="primary" plain @click="useMeInner" class="usepicbtn">使用本图</el-button>
                    </div>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="dialogVisibleInner = false">取消</el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
        </div>
        <div class="contentPics">
            <el-divider content-position="center">内容配图预览</el-divider>
            <el-image class="previewTitlePic" v-if="choseCropperInner == false" :src="urlDefultForPic" :fit="contain" />
            <el-image class="previewTitlePicSquare" v-if="choseCropperInner == true" :src="cropperImgDataInner"
                :fit="contain" />
        </div>


        <el-button type="primary" plain :onclick="toAddTipsOfficial" class="addbtn">
            <el-icon>
                <Promotion />
            </el-icon>
            <span> 现在创建！</span>
        </el-button>

    </div>
</template>
<script setup>
import {
    Guide,
    PictureFilled,
    User,
    HomeFilled,
    ChatLineSquare,
    Apple,
    Document,
    List,
    Tools,
    ShoppingCart,
    CollectionTag,
    Finished,
    InfoFilled,
    Cherry,
    Goods,
    Sell,
    ShoppingCartFull,
    Van,
    Sunrise,
    StarFilled,
    EditPen,
    Promotion,
    Grape,
    Pear,
} from '@element-plus/icons-vue';
import dayjs from 'dayjs';
import { ElMessage } from 'element-plus';
import axios from 'axios';
const formLabelWidth = '140px';

</script>
<script>

export default {
    data() {
        return {
            baseURL: 'http://localhost:8080',
            dialogVisible: false,
            dialogVisibleSmall: false,
            dialogVisibleInner: false,
            dialogPreViewBigVisible: false,
            formInline: {
                guideid: 0,
                title: '',
                content: '',
                coverimgbig: '',
                innerimg: '',
                coverimgsmall: '',
                isrotograph: 0,
                classification: 0,
                date: 0,
            },
            checkformInline: {
                guideid: 0,
                title: '',
                content: '',
                coverimgbig: '',
                innerimg: '',
                coverimgsmall: '',
                isrotograph: 0,
                classification: 0,
                date: 0,
            },
            dialogFormVisible: false,
            showSearch: false,
            tableData: [],
            tableDataStore: [],
            tablecoverbigimgList: [],
            tablecoversmallimgList: [],
            tableinnerimgList: [],
            tablecoverbigimg: '',
            tablecoversmallimg: '',
            tableinnerimg: '',
            addTips: {
                guideid: 0,
                title: '',
                content: '',
                coverimgbig: '',
                innerimg: '',
                coverimgsmall: '',
                isrotograph: 0,
                classification: 0,
                date: 0,
            },
            form: {
                guideid: 0,
                title: '',
                content: '',
                coverimgbig: '',
                innerimg: '',
                coverimgsmall: '',
                isrotograph: 0,
                classification: 0,
                date: 0,
            },
            searchForm: [],
            searchtime: [],
            year: 0,
            month: 0,
            daynum: 0,
            cropperOptionBig: {
                img: '',
                outputSize: 1,
                outputType: 'png',
                full: false,
                canMove: true,
                canMoveBox: true,
                original: true,
                autoCrop: true,
                fixed: true,
                fixedNumber: [2.35, 1],
                centerBox: true,
                infoTrue: true,
                fixedBox: false,
                // autoCropHeight:,
                // autoCropWidth:,
                fillColor: 'white',

            },
            cropperOptionSmall: {
                img: '',
                outputSize: 1,
                outputType: 'png',
                full: false,
                canMove: true,
                canMoveBox: true,
                original: true,
                autoCrop: true,
                fixed: true,
                fixedNumber: [1, 1],
                centerBox: true,
                infoTrue: true,
                fixedBox: false,
                // autoCropHeight:,
                // autoCropWidth:,
                fillColor: 'white',
            },
            cropperOptionInner: {
                img: '',
                outputSize: 1,
                outputType: 'png',
                full: false,
                canMove: true,
                canMoveBox: true,
                original: true,
                autoCrop: true,
                fixed: false,
                fixedNumber: [2.35, 1],
                centerBox: true,
                infoTrue: true,
                fixedBox: false,
                // autoCropHeight:,
                // autoCropWidth:,
                fillColor: 'white',
            },
            model: false,
            modelSrc: '',
            isPreview: false,
            previews: {
                h: 0.5,
                w: 0.2,
                img: '',
            },
            previewImg: '',
            loading: false,
            cropperImgDataBig: '',
            cropperImgDataSmall: '',
            cropperImgDataInner: '',
            choseCropperBig: false,
            choseCropperSmall: false,
            choseCropperInner: false,
            urlDefultForPic: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
            categoryChosen: 0,
            isrotographChosen: 0,
            coverimgbigfileList: [],
            coverimgsmallfileList: [],
            innerimgfileList: [],
            coverimgbigfileArray: [],
            coverimgsmallfileArray: [],
            innerimgfileArray: [],
        }

    },
    methods: {
        formatDate(date) {
            var y = new Date(date).getFullYear();
            var m = new Date(date).getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            var d = new Date(date).getDate();
            d = d < 10 ? ('0' + d) : d;
            return y + '-' + m + '-' + d;
        },
        Formatter(row, column) {
            if (row.create_time) {
                //console.log(new Date(row.create_time));
                this.day = new Date(row.create_time);
            }
            //console.log(this.formatDate(this.day));
            return this.formatDate(row.create_time);
        },
        backtosimpleformatDate(date) {
            var y = new Date(date).getFullYear();
            this.year = y;
            var m = new Date(date).getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            this.month = m;
            var d = new Date(date).getDate();
            d = d < 10 ? ('0' + d) : d;
            this.daynum = d;
            return y + '-' + m + '-' + d;
        },
        backtosimpleTime(date) {
            this.searchtime = this.checkformInline.create_time.split('-');
            this.backtosimpleformatDate(date);
            if (this.searchtime[0] == this.year && this.searchtime[1] == this.month && this.searchtime[2] == this.daynum) {
                return 'get';
            }
            else {
                return 'fail';
            }
        },
        getLastName(fileArray, i) {
            let pos = fileArray[i].name.lastIndexOf(".");
            let lastName = fileArray[i].name.substring(pos + 1, fileArray[i].name.length);
            console.log(lastName)
            return lastName
        },
        getBase64upload(imgUrl) {
            return new Promise((resolve, reject) => {
                if (!imgUrl) {
                    reject('请传入imgUrl内容')
                }
                window.URL = window.URL || window.webkitURL
                var xhr = new XMLHttpRequest()
                xhr.open('get', imgUrl, true)
                xhr.responseType = 'blob'
                xhr.onload = function () {
                    if (this.status == 200) {
                        // 得到一个blob对象
                        var blob = this.response
                        const oFileReader = new FileReader()
                        oFileReader.onloadend = function (e) {
                            const base64 = e.target.result
                            resolve(base64 || '')
                        }
                        oFileReader.readAsDataURL(blob)
                    }
                }
                xhr.send()

            })
        },
        //长方形
        //上传封面图片的显示dialog函数-长方形
        handleChangeUploadVisible() {
            this.dialogVisible = true;
            this.choseCropperBig = true;
        },
        // 上传按钮 限制图片大小和类型
        handleChangeUpload(file, fileList) {
            this.handleChangeUploadVisible();
            const isJPG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
                return false
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
                return false
            }
            // 上传成功后将图片地址赋值给裁剪框显示图片
            this.$nextTick(async () => {
                // base64方式
                // this.cropperOptionBig.img = await fileByBase64(file.raw)
                this.cropperOptionBig.img = URL.createObjectURL(file.raw)
                this.loading = false
                this.dialogVisible = true
            })
        },
        //更换新的图片
        handleChangeUploadChange(file, fileList) {
            this.dialogPreViewBigVisible = false;
            const isJPG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 5;
            if (!isJPG) {
                this.$message.error('上传图片只能是 JPG/PNG 格式!');
                return false
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 5MB!');
                return false
            }
            // 上传成功后将图片地址赋值给裁剪框显示图片
            this.$nextTick(async () => {
                // base64方式
                // this.cropperOptionBig.img = await fileByBase64(file.raw)
                this.cropperOptionBig.img = URL.createObjectURL(file.raw)
                this.loading = false
                this.dialogVisible = true
            })
        },
        // 放大/缩小
        changeScaleHandle(num) {
            num = num || 1;
            this.$refs.cropper.changeScale(num);
        },
        // 左旋转
        rotateLeftHandle() {
            this.$refs.cropper.rotateLeft();
        },
        // 右旋转
        rotateRightHandle() {
            this.$refs.cropper.rotateRight();
        },
        // 下载
        downloadHandle(type) {
            let aLink = document.createElement('a')
            aLink.download = 'author-img'
            if (type === 'blob') {
                this.$refs.cropper.getCropBlob((data) => {
                    let downImg = window.URL.createObjectURL(data)
                    aLink.href = window.URL.createObjectURL(data)
                    aLink.click()
                })
            } else {
                this.$refs.cropper.getCropData((data) => {
                    let downImg = data;
                    aLink.href = data;
                    aLink.click()
                })
            }
        },
        // 清理图片
        clearImgHandle() {
            this.cropperOptionBig.img = ''
        },
        // 截图框移动回调函数
        cropMoving(data) {
            if (data.moving != true) {
                this.previews.w = data.axis.x2 - data.axis.x1;
                this.previews.h = data.axis.y2 - data.axis.y1;
            }
            // 截图框的左上角 x，y和右下角坐标x，y
            // let cropAxis = [data.axis.x1, data.axis.y1, data.axis.x2, data.axis.y2]
            // console.log(cropAxis)
        },
        // 实时预览函数
        realTime(data) {
            this.previews = data
            // var h = 0.5
            // var w = 0.2

            this.previewStyle1 = {
                width: this.previews.w + "px",
                height: this.previews.h + "px",
                overflow: "hidden",
                margin: "0",
                zoom: this.previews.h
            }

            this.previewStyle2 = {
                width: this.previews.w + "px",
                height: this.previews.h + "px",
                overflow: "hidden",
                margin: "0",
                zoom: this.previews.w
            }

            // 固定为 100 宽度
            this.previewStyle3 = {
                width: this.previews.w + "px",
                height: this.previews.h + "px",
                overflow: "hidden",
                margin: "0",
                zoom: 100 / this.previews.w
            }

            // 固定为 100 高度
            this.previewStyle4 = {
                width: this.previews.w + "px",
                height: this.previews.h + "px",
                overflow: "hidden",
                margin: "0",
                zoom: 100 / this.previews.h
            }
            this.previews = data
        },
        finish() {
            // 获取截图的 blob 数据
            this.$refs.cropper.getCropBlob((blob) => {
                this.loading = true
                this.dialogVisible = false
                this.previewImg = URL.createObjectURL(blob)
                this.isPreview = true
            })
            // 获取截图的 base64 数据
            this.$refs.cropper.getCropData(data => {
                console.log(data)
                this.loading = true;
                this.isPreview = true;
            })
        },
        // getImageBase64(blob) {
        //     return new Promise((resolve, reject) => {
        //         const reader = new FileReader();
        //         reader.readAsDataURL(blob);
        //         reader.onload = () => {
        //             const base64 = reader.result;
        //             resolve(base64);
        //         }
        //         reader.onerror = error => reject(error);
        //     });
        // },
        // finish(type) {
        //     this.dialogPreViewBigVisible = true;
        //     if (type === 'blob') {
        //         this.$refs.cropper.getCropBlob((data) => {
        //             this.realTime(data);
        //             var img = window.URL.createObjectURL(data)
        //             this.model = true
        //             this.modelSrc = img
        //             this.loading = true
        //             this.previewImg = URL.createObjectURL(data)
        //             this.isPreview = true
        //         })
        //     } else {
        //         this.$refs.cropper.getCropData((data) => {
        //             this.model = true
        //             this.modelSrc = data
        //         })
        //     }
        // },

        useMe() {
            // 获取截图的 base64 数据
            this.$refs.cropper.getCropData(data => {
                let lastName = data.slice(11, 14).split(';')[0];
                this.coverimgbigfileArray.push(
                    {
                        url: data,
                        name: new Date().getTime() + Math.floor(Math.random() * (0 - 1000)) + 1000 + '.' + lastName
                    }
                )
                console.log(this.coverimgbigfileArray);
                console.log(this.coverimgbigfileArray[0].name);
                this.cropperImgDataBig = data;
                this.dialogPreViewBigVisible = false;
                this.dialogVisible = false;
            })
        },

        //正方形
        //上传封面图片的显示dialog函数-正方形
        handleChangeUploadSquareVisible() {
            this.dialogVisibleSmall = true;
            this.choseCropperSmall = true;
        },
        // 上传按钮 限制图片大小和类型
        handleChangeUploadSquare(file, fileList) {
            this.handleChangeUploadSquareVisible();
            const isJPG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
                return false
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
                return false
            }
            // 上传成功后将图片地址赋值给裁剪框显示图片
            this.$nextTick(async () => {
                // base64方式
                // this.cropperOptionSmall.img = await fileByBase64(file.raw)
                this.cropperOptionSmall.img = URL.createObjectURL(file.raw)
                this.loading = false
                this.dialogVisibleSmall = true
            })
        },
        //更换新的图片
        handleChangeUploadSquareChange(file, fileList) {
            const isJPG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
                return false
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
                return false
            }
            // 上传成功后将图片地址赋值给裁剪框显示图片
            this.$nextTick(async () => {
                // base64方式
                // this.cropperOptionSmall.img = await fileByBase64(file.raw)
                this.cropperOptionSmall.img = URL.createObjectURL(file.raw)
                this.loading = false
                this.dialogVisibleSmall = true
            })
        },
        // 放大/缩小
        changeScaleHandleSqare(num) {
            num = num || 1;
            this.$refs.cropper.changeScale(num);
        },
        // 左旋转
        rotateLeftHandleSqare() {
            this.$refs.cropper.rotateLeft();
        },
        // 右旋转
        rotateRightHandleSqare() {
            this.$refs.cropper.rotateRight();
        },
        // 下载
        downloadHandleSqare(type) {
            let aLink = document.createElement('a')
            aLink.download = 'author-img'
            if (type === 'blob') {
                this.$refs.cropper.getCropBlob((data) => {
                    let downImg = window.URL.createObjectURL(data)
                    aLink.href = window.URL.createObjectURL(data)
                    aLink.click()
                })
            } else {
                this.$refs.cropper.getCropData((data) => {
                    let downImg = data;
                    aLink.href = data;
                    aLink.click()
                })
            }
        },
        // 清理图片
        clearImgHandleSqare() {
            this.cropperOptionSmall.img = ''
        },
        // 截图框移动回调函数
        cropMovingSqare(data) {
            // 截图框的左上角 x，y和右下角坐标x，y
            // let cropAxis = [data.axis.x1, data.axis.y1, data.axis.x2, data.axis.y2]
            // console.log(cropAxis)
        },
        finishSqare() {
            // 获取截图的 blob 数据
            this.$refs.cropper.getCropBlob((blob) => {
                this.loading = true
                this.dialogVisible = false
                this.previewImg = URL.createObjectURL(blob)
                this.isPreview = true
            })
            // 获取截图的 base64 数据
            // this.$refs.cropper.getCropData(data => {
            //     console.log(data)
            // })
        },
        useMeSquare() {
            // 获取截图的 base64 数据
            this.$refs.cropper.getCropData(data => {
                let lastName = data.slice(11, 14).split(';')[0];
                this.coverimgsmallfileArray.push(
                    {
                        url: data,
                        name: new Date().getTime() + Math.floor(Math.random() * (0 - 1000)) + 1000 + '.' + lastName
                    }
                )
                console.log(this.coverimgsmallfileArray);
                console.log(this.coverimgsmallfileArray[0].name);
                this.cropperImgDataSmall = data;
                this.dialogVisibleSmall = false;
            })
        },

        //上传内容配图
        //上传内容配图显示dialog函数
        handleChangeUploadVisibleInner() {
            this.dialogVisibleInner = true;
            this.choseCropperInner = true;
        },
        // 上传按钮 限制图片大小和类型
        handleChangeUploadInner(file, fileList) {
            console.log('uploadinner')
            this.handleChangeUploadVisibleInner();
            const isJPG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 5;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
                return false
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 5MB!');
                return false
            }
            // 上传成功后将图片地址赋值给裁剪框显示图片
            this.$nextTick(async () => {
                // base64方式
                // this.cropperOptionSmall.img = await fileByBase64(file.raw)
                this.cropperOptionInner.img = URL.createObjectURL(file.raw)
                console.log(this.cropperOptionInner.img)
                this.loading = false
                this.dialogVisibleInner = true
            })
        },
        //更换图片
        handleChangeUploadInnerChange(file, fileList) {
            console.log('change!')
            const isJPG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 5;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
                return false
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 5MB!');
                return false
            }
            // 上传成功后将图片地址赋值给裁剪框显示图片
            this.$nextTick(async () => {
                // base64方式
                // this.cropperOptionSmall.img = await fileByBase64(file.raw)
                this.cropperOptionInner.img = URL.createObjectURL(file.raw)
                console.log(this.cropperOptionInner.img)
                this.loading = false
                this.dialogVisibleInner = true
            })
        },
        // 放大/缩小
        changeScaleHandleInner(num) {
            num = num || 1;
            this.$refs.cropper.changeScale(num);
        },
        // 左旋转
        rotateLeftHandleInner() {
            this.$refs.cropper.rotateLeft();
        },
        // 右旋转
        rotateRightHandleInner() {
            this.$refs.cropper.rotateRight();
        },
        // 下载
        downloadHandleInner(type) {
            let aLink = document.createElement('a')
            aLink.download = 'author-img'
            if (type === 'blob') {
                this.$refs.cropper.getCropBlob((data) => {
                    let downImg = window.URL.createObjectURL(data)
                    aLink.href = window.URL.createObjectURL(data)
                    aLink.click()
                })
            } else {
                this.$refs.cropper.getCropData((data) => {
                    let downImg = data;
                    aLink.href = data;
                    aLink.click()
                })
            }
        },
        // 清理图片
        clearImgHandleInner() {
            this.cropperOptionInner.img = ''
        },
        // 截图框移动回调函数
        cropMovingInner(data) {
            // 截图框的左上角 x，y和右下角坐标x，y
            // let cropAxis = [data.axis.x1, data.axis.y1, data.axis.x2, data.axis.y2]
            // console.log(cropAxis)
        },
        finishInner() {
            // 获取截图的 blob 数据
            this.$refs.cropper.getCropBlob((blob) => {
                this.loading = true
                this.dialogVisibleInner = false
                this.previewImg = URL.createObjectURL(blob)
                this.isPreview = true
            })
            // 获取截图的 base64 数据
            // this.$refs.cropper.getCropData(data => {
            //     console.log(data)
            // })
        },
        useMeInner() {
            this.$refs.cropper.getCropBlob((blob) => {
                this.loading = true
                this.dialogVisibleInner = false
                this.previewImg = URL.createObjectURL(blob)
                this.isPreview = true
            })
            // 获取截图的 base64 数据
            this.$refs.cropper.getCropData(data => {
                let lastName = data.slice(11, 14).split(';')[0];
                this.innerimgfileArray.push(
                    {
                        url: data,
                        name: new Date().getTime() + Math.floor(Math.random() * (0 - 1000)) + 1000 + '.' + lastName
                    }
                )
                console.log(this.innerimgfileArray);
                console.log(this.innerimgfileArray[0].name);
                this.cropperImgDataInner = data;
                this.dialogVisibleInner = false;
            })
        },
        // httpRequest(src) {
        //     let that = this
        //     return new Promise((resolve, reject) => {
        //         let xhr = new XMLHttpRequest()
        //         xhr.open('GET', src, true)
        //         xhr.responseType = 'blob'
        //         xhr.onload = function (e) {
        //             if (this.status == 200) {
        //                 let myBlob = this.response
        //                 let files = new window.File([myBlob], Date.now() + Math.floor(Math.random()) + '.jpg', { type: myBlob.type }) // myBlob.type 自定义文件名
        //                 resolve(files)
        //             } else {
        //                 reject(false)
        //             }
        //         }
        //         xhr.send()
        //     })
        // },
        // getBase64(file) {
        //     return new Promise((resolve, reject) => {
        //         const reader = new FileReader()
        //         reader.readAsDataURL(file)
        //         reader.onload = () => resolve(reader.result)
        //         reader.onerror = (error) => reject(error)
        //     })
        // },

        //上传贴士内容
        async toAddTipsOfficial() {
            if (this.form.title != '' && this.form.content != '' && this.cropperImgDataBig != '' && this.cropperImgDataSmall != '') {
                console.log(this.innerimgfileArray);
                axios({
                    method: 'post',
                    url: 'http://localhost:8080/tips/addtipsofficialbackend',
                    withCredentials: true,
                    data: {
                        title: this.form.title,
                        content: this.form.content,
                        coverimgbig: this.coverimgbigfileArray[0],
                        innerimg: this.innerimgfileArray[0],
                        coverimgsmall: this.coverimgsmallfileArray[0],
                        isrotograph: this.isrotographChosen,
                        classification: this.categoryChosen,
                        date: new Date().getTime(),
                    },
                }).then(res => {
                    this.tableData = res.data.data;
                    this.tableDataStore = res.data.data;
                    ElMessage({
                        message: '上传成功:-)',
                        type: 'success',
                    })
                    this.$router.push({
                        path: '/tipsofficial'
                    })
                })
            } else {
                alert("有未输入项，请检查")
            }
            console.log(this.cropperOptionBig);

        },
    },
    mounted() {
        //页面加载完成后，将数据库内的内容赋给定义的data变量
        axios({
            method: 'post',
            url: 'http://localhost:8080/tips/gettipsbackend',
            withCredentials: true,
        }).then(res => {
            this.tableData = res.data.data;
            this.tableDataStore = res.data.data;
            console.log(res.data.data);
            for (var i = 0; i < res.data.data.length; i++) {
                this.tablecoverbigimgList.push(res.data.data[i].coverimgbig);
                this.tablecoversmallimgList.push(res.data.data[i].coverimgsmall);
                this.tableinnerimgList.push(res.data.data[i].innerimg);
            }
            //console.log("tableimglist:" + this.tableimgList);
            this.tablecoverbigimg = this.tablecoverbigimgList[0];
            this.tablecoversmallimg = this.tablecoversmallimgList[0];
            this.tableinnerimg = this.tableinnerimgList[0];
            // this.cropperOptionBig.img = this.tablecoverbigimg;
            // this.cropperOptionSmall.img = this.tablecoversmallimg;

        })
    }
}
</script>
<style scoped>
#sidepart {
    width: 100%;
    position: absolute;
    top: 5px;
    font-family: '华文中宋';
}

#mainpart {
    width: 80%;
    position: absolute;
    top: 20px;
    left: 260px;
    font-family: '华文中宋';
}

#spanpart {
    font-size: 30px;
    font-family: '华文中宋';
}

/* dialog */
.el-button--text {
    margin-right: 15px;
}

.el-select {
    width: 300px;
}

.el-input {
    width: 300px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

#spanlittlepart {
    font-size: 15px;
    color: cadetblue;
    font-family: '华文中宋';
}

.addbtn {
    width: 100%;
    margin-bottom: 20px;
    font-family: '华文中宋';
    position: relative;
    left: -50px;
}

.cropper-content .cropper {
    width: auto;
    height: 350px;
}

.changepicbtn {
    width: 100%;
    position: relative;
    top: 0px;
    left: 0px;
    margin-left: 290px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-family: '华文中宋';
    position: relative;
    left: -50px;
}

.usepicbtn {
    width: 100%;
    position: relative;
    top: 0px;
    left: 0px;
    margin-left: 50px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-family: '华文中宋';
    position: relative;
    left: -50px;
}

.cropperpicbtn {
    width: 10%;
    position: relative;
    top: 0px;
    left: 0px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-family: '华文中宋';
    position: relative;
    left: -50px;
}

.cropperpicbtnveryleft {
    width: 15%;
    position: relative;
    top: 0px;
    left: 0px;
    margin-left: 120px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-family: '华文中宋';
    position: relative;
    left: -50px;
}

.previewTitlePic {
    width: 50%;
}

.previewTitlePicSquare {
    width: 20%;
    margin-top: 10px;
}

.uploadIneerPic {
    margin-bottom: 20px;
}

.contentPics {
    margin-bottom: 15px;
}
</style>

<style scoped>
/* .cropper-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(-50px, -80px);
}

.cropper-wrapper .pre-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cropper-wrapper .pre-box button {
    width: 100px;
    margin-top: 15px;
}

.crop-dialog .cropper-content {
    padding: 0 40px;
}

.crop-dialog .cropper-content .cropper {
    width: auto;
    height: 350px;
}

.crop-dialog .action-box {
    padding: 25px 40px 0 40px;
    display: flex;
    justify-content: center;
}

.crop-dialog .action-box button {
    width: 80px;
    margin-right: 15px;
}

.crop-dialog .dialog-footer button {
    width: 100px;
} */
</style>